<template>
	<div class="web-index">
		<header class="web-header" :class="[scrollY > 150 ? 'web-header-fixed' : '']">
			<div class="wrap">
				<div class="lmenu">
					<a href="/webMain" class="menu-item">首页</a>
					<a href="/newsCenter" class="menu-item">新闻中心</a>
					<a href="/notice" class="menu-item">通知公告</a>
				</div>
				<div class="rmenu">
					<a href="/personal" class="menu-item">个人中心</a>
					<a href="/advice" class="menu-item">意见箱</a>
					<a href="/personal" class="menu-item user">欢饮您，若依</a>
				</div>
			</div>
			<div class="logo">
				<img src="@/assets/logo/web-logo-h.png" alt="">
				<a href="/webMain">校园新闻网</a>
			</div>
		</header>
		<div class="web-container" ref="container">
			<transition name="fade-transform" mode="out-in">
				<keep-alive>
					<router-view v-if="!$route.meta.link" :key="key" />
				</keep-alive>
			</transition>
			<footer class="web-footer">
				<div class="copyright">版权所有 Copyright ©2025-2026</div>
				<div class="friend-wrap">
					<div class="left">友情链接: </div>
					<div class="link-box">
						<div class="link" v-for="(item, index) in friendList" :key="index">
							<a :href="item.link" target="_blank">{{ item.name }}</a>
						</div>
					</div>
				</div>
			</footer>
		</div>
	</div>
</template>

<script>
import store from '@/store/index'
import { getToken, removeToken } from '@/utils/auth'
import { mapGetters } from 'vuex'
export default {
	name: 'WebIndex',
	data() { 
		return {
			//滚动距离
			scrollY: 0,
			//友情链接
			friendList: [
				{ name: '中国教育新闻网', link: 'http://www.jyb.cn/' },
				{ name: '科学网', link: 'https://www.sciencenet.cn/' },
				{ name: '中青在线', link: 'http://www.cyol.net/' },
				{ name: '金色航线', link: 'https://xcb.hfut.edu.cn/' },
				{ name: '新华每日电讯', link: 'http://mrdx.xinhuanet.com/' }
			]
		}
	},
	computed: {
		...mapGetters([
			'name',
			'avatar'
		]),
		key() {
			return this.$route.path
		}
	},
	mounted() { 
		this.initPage();
	},
	methods: {
		/**
		 * 初始化页面
		 */
		initPage() { 
			//判断是否登录
			if (getToken()) { 
				this.queryUserInfo()
			}

			let el = this.$refs.container;
			el.addEventListener('scroll', () => { 
				this.scrollY = el.scrollTop;
			})
		},
		/**
		 * 获取用户信息
		 */
		queryUserInfo() { 
			// 判断当前用户是否已拉取完user_info信息
			store.dispatch('GetInfo').then(() => {
				this.isLogin = true
			}).catch(err => {
				this.isLogin = false
			})
		},
		/**
		 * 首页
		 */
		handleHomePage() { 
			this.$router.push('/webMain')
		},
		/**
		 * 个人中心
		 */
		handlePersonal() { 
			this.$router.push('/personal')
		},
		/**
		 * 退出登录
		 */
		handleLogout() { 
			removeToken();
			this.$router.push('/login')
		}
	}
}
</script>

<style lang="scss" scoped>
.web-index {
	width: 100%;
	height: 100%;
    margin: 0 auto;
	background-image: url('~@/assets/images/bg.jpg');
	background-size: 100% 100%;
	overflow: hidden;
	.web-header {
		position: relative;
		height: 40px;
		line-height: 40px;
		background-color: #a6292f;
		width: 100%;
		top: 0;
		z-index: 99999999;
		transition: all .3s ease;
		.wrap {
			display: flex;
			width: 1460px;
			// padding: 0 100px;
			margin: 0 auto;
			height: 100%;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			.lmenu {
				.menu-item {
					margin-right: 24px;
				}
			}
			.rmenu {
				.menu-item {
					margin-left: 24px;
				}
			}
			.menu-item {
				color: #cea3a4;
				transition: all .2s;
				font-size: 14px;
				&:hover {
					color: #fff;
				}
				&.user {
					padding-left: 30px;
				}
			}
		}
		.logo {
			display: flex;
			position: absolute;
			width: 603px;
			height: 72px;
			top: 40px;
			left: 50%;
			transform: translateX(-50%);
			background: url('~@/assets/images/logo-bg-big.png') no-repeat center;
			flex-direction: row;
			justify-content: center;
			> img {
				width: 48px;
				height: 48px;
			}
			> a {
				font-family: 'ZKCEYYT';
				margin-top: 5px;
				font-size: 36px;
				color: #fff;
				margin-left: 30px;
				letter-spacing: 4px;
			}
		}
	}
	.web-header-fixed {
		position: fixed !important;
		.logo {
			width: 489px;
			height: 17px;
			background: url('~@/assets/images/logo-bg-small.png') no-repeat center;
			left: 50%;
			transform: translateX(-50%);
			> img {
				position: absolute;
				top: -28px;
				left: 140px;
				width: 36px;
				height: 36px;
			}
			> a {
				position: absolute;
				top: -34px;
				left: 165px;
				font-size: 28px;
			}
		}
	}
	.web-container {
		width: 100%;
		height: 100%;
		overflow: auto;
		.web-footer {
			width: 100%;
			height: 120px;
			background-color: #a6292f;
			.copyright {
				width: 100%;
				text-align: center;
				padding: 20px 0;
				color: #cea3a4;
				font-size: 14px;
			}
			.friend-wrap {
				width: 600px;
				margin: 0 auto;
				display: flex;
				flex-direction: row;
				.left {
					color: #cea3a4;
					line-height: 28px;
					margin-right: 12px;
					font-size: 14px;
					font-weight: 300;
					white-space: nowrap;
				}
				.link-box {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					.link {
						color: #cea3a4;
						line-height: 28px;
						margin: 0 24px 12px 0;
						font-size: 14px;
						font-weight: 300;
						transition: all .2s;
						&:hover {
							color: #fff;
						}
					}
				}
			}
		}
	}
}
</style>